<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>表单验证</title>
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />

		<!-- basic styles -->

		<link rel="stylesheet" href="assets/css/font-awesome.min.css" />

        <!-- validate -->
        <link href="assets/css/style.css" rel="stylesheet">

		<!-- page specific plugin styles -->

		<link rel="stylesheet" href="assets/css/jquery-ui-1.10.3.custom.min.css" />
		<link rel="stylesheet" href="assets/css/chosen.css" />
		<link rel="stylesheet" href="assets/css/datepicker.css" />
		<link rel="stylesheet" href="assets/css/bootstrap-timepicker.css" />
		<link rel="stylesheet" href="assets/css/daterangepicker.css" />
		<link rel="stylesheet" href="assets/css/colorpicker.css" />
		<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="assets/css/bootstrap-responsive.min.css" />

		<!-- fonts -->



		<!-- ace styles -->

		<link rel="stylesheet" href="assets/css/ace.min.css" />
		<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
		<link rel="stylesheet" href="assets/css/ace-skins.min.css" />

		<!--[if lte IE 8]>
		  <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->

		<script src="assets/js/ace-extra.min.js"></script>

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

		<!--[if lt IE 9]>
		<script src="assets/js/html5shiv.js"></script>
		<script src="assets/js/respond.min.js"></script>
		<![endif]-->
	</head>

	<body>


		<div class="main-container" id="main-container">
			<div class="main-container-inner">
				<div class="main-content">
					<div class="page-content">
						<div class="page-header">
							<h1>
								表单验证
								<small>
									<i class="icon-double-angle-right"></i>
									新增用户
								</small>
							</h1>
						</div><!-- /.page-header -->

						<div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->

                                <form action="" id="contact-form" class="form-inline">
                                    <fieldset>
                                        <div class="form-group">
                                            <label class="control-label" for="email">邮箱</label>
                                            <div class="controls">
                                                <input type="text" class="input-xlarge" name="email" id="email">
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label" for="name">姓名</label>
                                            <div class="controls">
                                                <input type="text" class="input-xlarge" name="name" id="name">
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label" for="mobile">手机号</label>
                                            <div class="controls">
                                                <input class="input-xlarge" name="mobile" id="mobile" >
                                            </div>
                                        </div>
                                        <div class="form-actions">
                                            <button type="submit" class="btn btn-primary btn-large">提交</button>
                                            <button type="reset" class="btn">重置</button>
                                        </div>
                                    </fieldset>
                                </form>
					        </div><!-- /.page-content -->
				        </div><!-- /.main-content -->
	                </div><!-- /.main-container-inner -->
                </div><!-- /.main-container -->
            </div>
        </div>

		<!-- basic scripts -->

		<!--[if !IE]> -->

		<script src="assets/js/jquery.min.js"></script>



		<script src="assets/js/bootstrap.min.js"></script>
		<script src="assets/js/typeahead-bs2.min.js"></script>

		<!-- page specific plugin scripts -->


		<script src="assets/js/chosen.jquery.min.js"></script>
		<script src="assets/js/bootstrap-datepicker.min.js"></script>
		<script src="assets/js/bootstrap-timepicker.min.js"></script>
		<script src="assets/js/daterangepicker.min.js"></script>
        <script src="assets/js/jquery.validate.js"></script>
        <script src="assets/js/rules.js"></script>
		<!-- ace scripts -->

		<script src="assets/js/ace-elements.min.js"></script>
		<script src="assets/js/ace.min.js"></script>


		<!-- inline scripts related to this page -->

		<script type="text/javascript">
            $(document).ready(function(){

                $('#contact-form').validate({
                    rules: {
                        name: {
                            minlength: 2,
                            required: true,
                            stringCheck:true
                        },
                        email: {
                            required: true,
                            email: true
                        },
                        mobile: {
                            minlength: 2,
                            required: true,
                            isMobile:true
                        }
                    },
                    highlight: function(element) {
                        $(element).closest('.control-group').removeClass('success').addClass('error');
                    },
                    success: function(element) {
                        element
                                .text('OK!').addClass('valid')
                                .closest('.control-group').removeClass('error').addClass('success');
                    },
                    submitHandler: function(form) {  //通过之后回调
                        var param = $("#contact-form").serialize();
                        $.ajax({
                            url: "/jqGrid/commit.html",
                            type: "get",
                            success:function(xhr){
                                alert("成功"+xhr);
                            }
                        });
                    }
                    });

            }); // end document.ready

        </script>
	</body>
</html>
